<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" :model="sourceSearch" class="demo-form-inline">
                <el-form-item label="资源名称">
                    <el-input v-model="sourceSearch.searchParams.fileName" placeholder="请输入资源名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="header-bth">
            <el-button type="primary" size="small" icon="el-icon-upload2" @click="showAddFile">资源上传</el-button>
        </div>
        <div id="file-table">
            <el-table
                    :data="tableData"
                    stripe
                    height="310"
                    style="width: 100%">
                <el-table-column label="资料类别">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.fileType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="资料名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fileName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="文件大小(KB)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.size }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-popconfirm title="确定删除吗？" @confirm="deleteSource(scope.$index, scope.row)">
                            <el-button
                                    slot="reference"
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete">
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="sourceSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--        文件上传弹出层-->
        <el-dialog title="资源上传" :visible.sync="templateDialogFormVisible" width="40%" @close="clearInfo">
            <el-form :model="template" ref="templateInfo" :rules="templateRules" label-position="left" label-width="80px">
                <el-form-item label="资源名称" prop="fileName">
                    <el-input v-model="template.fileName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源类型" prop="fileType">
                    <el-select v-model="template.fileType" placeholder="请选择资源类型" style="width: 100%">
                        <el-option label="市场物料" value="市场物料"></el-option>
                        <el-option label="品牌物料" value="品牌物料"></el-option>
                        <el-option label="教学教质" value="教学教质"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择资源" >
                    <el-upload
                            class="upload-demo"
                            name="file"
                            drag
                            :file-list="fileList"
                            action="#"
                            :http-request="uploadTemplate" >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="templateDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSource">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addResourceInfo, deleteResource, resourcesPage, uploadResource} from "@/api/resources";

    export default {
        name: "UploadView",
        data() {
            return {
                tableData:[],
                pageSizes:[5,10,15],
                total:20,
                templateDialogFormVisible:false,
                sourceSearch:{
                    limit:5,
                    page:1,
                    searchParams:{
                        fileName:''
                    }
                },
                fileList:[],
                template:{
                    uuidName:'',
                    size:'',
                    fileName:'',
                    fileType:''
                },
                templateRules:{
                    fileName:[{required:true,message:'请填写资源名称',trigger:'blur'}],
                    fileType:[{required:true,message:'请选择资源类型',trigger:'blur'}]
                }
            }
        },
        methods: {
            //切换每页显示条数
            handleSizeChange(val){
                this.sourceSearch.limit=val
                this.list()
            },
            // 切换页码
            handleCurrentChange(val){
                this.sourceSearch.page=val
                this.list()
            },
            showAddFile(){
                this.templateDialogFormVisible=true
            },

            //文件上传
            uploadTemplate(data){
                let formData = new FormData();
                formData.append("file",data.file)

                uploadResource(formData).then(res=>{
                    if (res.code==0){
                        this.$message.success(res.message)
                        this.template.uuidName = res.data.uuidName
                        this.template.size = res.data.size
                    }
                })

            },
            //添加上传文件信息
            addSource(){
                this.$refs.templateInfo.validate(valid=>{
                    if (!valid) {
                        this.$message.warning("请填写完整信息")
                        return
                    }
                    // 发送异步请求 添加资源信息
                    addResourceInfo(this.template).then(res=>{
                        if (res.code==0){
                            this.$message.success(res.message)
                            this.templateDialogFormVisible=false
                            this.list()
                            return
                        }
                        this.$message.warning(res.message)
                    })

                })

            },
            // 删除
            deleteSource(index,row){
                    deleteResource(row.uuidName).then(res=>{
                        if (res.code==0){
                            this.$message.success(res.message)
                            this.list()
                            return
                        }
                        this.$message.warning(res.message)
                    })
            },
            // 搜索
            onSearchSubmit(){
                this.sourceSearch.page=1
                this.list()
            },
            list(){
                resourcesPage(this.sourceSearch).then(res=>{
                    if (res.code==0){
                        this.total = res.data.total
                        this.tableData = res.data.tableData
                    }
                })
            },
            clearInfo(){
                this.$refs.templateInfo.clearValidate()
                this.template = {}
                this.fileList= []
            }
        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    #box{
        width: 95%;
        margin: 5px auto 0;
    }

    #search {
        margin-top: 20px;
        padding: 5px;
        border-bottom: 1px solid #eee;
    }

    #file-table {
        margin-top: 20px;
    }


    #nav-page {
        margin-top: 15px;
    }

    #header-bth{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>

